<template>
  <div class="layout">
    <Header></Header>
    <section ref="section">
      <div class="menu" ref="menu" style="background: #f2f2f2">
        <div class="box-card menu-left" v-if="LeftMenuFlag">
          <div class="clearfix">
            <span>目录</span>
            <i
              class="el-icon-close menu-left_close"
              style="float: right; padding: 3px 0"
              type="text"
              @click="removeLeftMenu"
            ></i>
          </div>
          <el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
            default-expand-all
          ></el-tree>
        </div>
      </div>
      <div class="content">
        <div class="screen" ref="screen"></div>
      </div>

      <div class="controls" ref="controls">
        <menuControl ref="menucontrol"></menuControl>
      </div>
    </section>

    <footer>
      <div class="left">
        <div class="component-icon-btn">
          <i class="icons icons-structure"></i>
        </div>
        <div class="component-icon-btn">
          <i class="icons icons-web_mode"></i>
        </div>

        <div class="word-stat-info status-bar-item">
          <div class="items-group-left">
            <div class="item page-number"><span>页码 : 1</span></div>
            <div class="item page-info"><span>页面 : 1/1</span></div>
            <div class="item section-info"><span>节 : 1/1</span></div>
            <div class="divider"></div>
          </div>
          <div class="items-group-left">
            <div class="item row-num"><span>行 : 1</span></div>
            <div class="item column-num"><span>列 : 1</span></div>
            <div class="divider"></div>
          </div>
          <div class="items-group-left">
            <div class="item row-num"><span>字数 : 0</span></div>
          </div>
        </div>
      </div>

      <div class="right">
        <div class="network-wrapper">
          <i class="icons icons-network-normal icons-network-status"></i>
        </div>

        <div class="component-divider"></div>

        <div class="component-view-zoom">
          <div class="component-icon-btn" @click="Handleview('-')">
            <i class="icons icons-view_reduce"></i>
          </div>
          <div class="zoom-value">
            <span>{{ viewnum }}%</span>
          </div>
          <div class="component-icon-btn" @click="Handleview('+')">
            <i class="icons icons-view_fd"></i>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import Header from "@/components/pages/header.vue";
import menuControl from "@/components/menuControl/menuControl";

export default {
  name: "layout",
  data() {
    return {
      activeName: "second",
      LeftMenuFlag: true,
      LeftMenuList: [
        "一、认证方案",
        "二、人脸识别登录流程",
        "三、信息确认流程",
        "四、笔录流程",
        "五、各接口总次数",
      ],

      screenWidth: "",
      screenHeight: "",
      viewnum: 100,
      structure: true,

      // 左侧树形菜单
      data: [
        {
          label: "一、认证方案",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "二、人脸识别登录流程",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "三、信息确认流程",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "三、信息确认流程",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "三、信息确认流程",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "三、信息确认流程",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "三、信息确认流程",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "三、信息确认流程",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "三、信息确认流程",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "三、信息确认流程",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    // 隐藏左边菜单
    removeLeftMenu() {
      this.LeftMenuFlag = false;
      this.$refs.menu.style.display = "none";
      this.$refs.controls.children.length == 0
        ? (this.$refs.section.style.cssText = "grid-template-columns:8fr")
        : (this.$refs.section.style.cssText = "grid-template-columns:8fr 2fr");
    },
    Handleview(str) {
      if (str == "-") {
        this.viewnum -= 10;
      } else if (str == "+") {
        this.viewnum += 10;
      }

      this.$refs.screen.style.width = 794 * (this.viewnum / 100) + "px";
      this.$refs.screen.style.height = 1123 * (this.viewnum / 100) + "px";
    },
    // 树形菜单点击事件
    handleNodeClick(data) {
      console.log(data);
    },
    showLeftMenu() {
      this.LeftMenuFlag = true;
      this.$refs.menu.style.display = "block";
      this.$refs.controls.children.length == 0
        ? (this.$refs.section.style.cssText = "grid-template-columns:2fr 8fr ")
        : (this.$refs.section.style.cssText =
            "grid-template-columns:2fr 8fr 2.5fr");
      console.log("???");
    },
    showRightMenu() {
      this.$refs.menucontrol.menuFlag = true;
      this.$refs.controls.style.display = "block";
      console.log(this.$refs.menu.children.length);
      this.$refs.menu.children.length == 1
        ? (this.$refs.section.style.cssText =
            "grid-template-columns:2fr 8fr 2.5fr")
        : (this.$refs.section.style.cssText =
            "grid-template-columns: 8fr 2.5fr");
    },
  },
  watch: {
    screenWidth: function (val) {
      val <= 1700 ? (this.iconTitle = false) : (this.iconTitle = true);
    },
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
    this.screenHeight = document.body.clientHeight;
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
        this.screenHeight = document.body.clientHeight;
      })();
    };
  },
  components: {
    menuControl,
    Header,
  },
};
</script>

<style lang="scss" scoped>
.layout {
  section {
    display: grid;
    grid-template-columns: 2fr 8fr 2.5fr;
  }
}

.menu-left {
  background-color: #f4f4f4;
  margin-top: 30px;
  width: 100%;
  min-height: 200px;
  box-sizing: border-box;
  padding: 0 15px;
  height: calc(100vh - 150px);
  .el-tree {
    position: relative;
    cursor: default;
    background: #fff;
    color: #606266;
    // border: 1px solid #e2e2e2;
    border-radius: 5px;
    margin-top: 15px;
    background-color: #f4f4f4;
    height: calc(100% - 50px);
    overflow-y: scroll;
  }
  .menu-left_item {
    margin: 10px 0;
  }
  .menu-left_close {
    color: #838384;
    cursor: pointer;
  }
}
::v-deep .el-card {
  background-color: #f2f4f7;
}

footer {
  width: 100vw;
  position: fixed;
  display: flex;
  justify-content: space-between;
  cursor: default;
  height: 30px;
  background: #f2f4f7;
  box-shadow: 0 -1px 0 0 #e2e6ed;
  z-index: 9;
  bottom: 0;
  overflow: hidden;
  .left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 12px;
  }
  .component-icon-btn {
    position: relative;
    display: inline-block;
    padding: 4px;
    border-radius: 2px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 12px;
    &:hover {
      background: rgba(25, 55, 88, 0.04);
    }
  }

  .icons {
    vertical-align: middle;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    &-structure {
      background-image: url("../assets/imgs/1.svg");
    }
    &-web_mode {
      background-image: url("../assets/imgs/2.svg");
    }
  }
  .word-stat-info {
    display: flex;
    align-items: center;
    padding-right: 15px;
    flex-shrink: 0;
    zoom: 1;
    .items-group-left {
      padding-left: 16px;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    .divider {
      display: inline-block;
      height: 14px;
      width: 1px;
      margin-left: 16px;
      background-color: #e2e6ed;
    }
  }

  .right {
    flex-shrink: 0;
    overflow: hidden;
    padding-right: 8px;

    .network-wrapper {
      display: inline-block;
      height: 30px;
      line-height: 30px;
    }
    .icons-network-normal {
      background-image: url("../assets/imgs/3.svg");
    }
    .component-divider {
      top: 4px;
      height: 14px;
      margin: 0 8px;
      flex-shrink: 0;
      width: 1px;
      background-color: #e2e6ed;
      display: inline-block;
      vertical-align: middle;
    }

    .component-view-zoom {
      display: flex;
      transform: translateY(-25px) translateX(15px);
      width: 130px;
    }
    .icons {
      vertical-align: middle;
      display: inline-block;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      vertical-align: middle;

      &-view_reduce {
        background-image: url("../assets/imgs/4.svg");
        transform: translateY(-5px);
      }
      &-view_fd {
        background-image: url("../assets/imgs/5.svg");
        transform: translateY(-5px);
      }
    }
  }
}

.content {
  position: relative;
  overflow-y: auto;
  overflow-x: auto;
  box-sizing: border-box;
  max-height: calc(100vh - 110px);
  .screen {
    background: rgb(255, 255, 255);
    box-shadow: rgba(158, 161, 165, 0.4) 0px 2px 12px 0px;
    width: 794px;
    height: 1123px;
    overflow: hidden;
    margin: 20px auto;
  }
}
</style>
